<template>
    <breadcrumb base-title="数据表盘" title="电子签" :sub-title="tabName" />
    <div class="w-full box-border p-16px">
        <div class="mb-16px">
            <commonTabs v-model:active="active" :tabs="tabs" />
        </div>
        <div v-if="active === 1">
            <statisticsAnalysis />
        </div>
        <div v-if="active === 2">
            <insureDetail />
        </div>
    </div>
</template>
<script setup>
import { ref, computed } from 'vue'
import commonTabs from '@/components/commonTabs/index.vue'
import statisticsAnalysis from './statisticsAnalysis.vue'
import insureDetail from './insureDetail.vue'

const active = ref(1)
const tabs = ref([
    {
        name: '统计分析',
        id: 1
    },
    {
        name: '充值明细',
        id: 2
    }
])

const tabName = computed(() => {
    const data = tabs.value.find(i => i.id === active.value)
    return data.name
})

</script>
<style lang="scss" scoped>
.container {
    padding: 16px;
}
</style>